<script setup lang="ts">
import { ref, onActivated } from "vue";
import { useShopCar } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import Delete from "@iconify-icons/ep/delete";

defineOptions({
  name: "Goods"
});

onActivated(() => {
  let isHaveAddGoods = sessionStorage.getItem("isHaveAddGoods");
  if (isHaveAddGoods == "1") {
    onSearch();
  }
});

const tableRef = ref();
const {
  submitForm,
  loading,
  columns,
  dataList,
  pagination,
  warehouseList,
  tableSelectList,
  onSearch,
  handleSelectionChange,
  handleSizeChange,
  handleCurrentChange,
  handleDelete,
  submitOrder
} = useShopCar(tableRef);
</script>

<template>
  <div class="home">
    <!-- 商品展示 -->
    <el-card
      class="mb-4 flex-1"
      body-style="padding: 0 10px 0;margin: -10px 0;"
    >
      <PureTableBar title="" :columns="columns" @refresh="onSearch">
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            ref="tableRef"
            row-key="id"
            adaptive
            :adaptiveConfig="{ offsetBottom: 365 }"
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="dynamicColumns"
            :pagination="{ ...pagination, size }"
            show
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #operations="{ row }">
              <div class="flex justify-center">
                <el-popconfirm
                  :title="`是否确认删除当前商品: '${row.goodsName}' ?`"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <iconifyIconOffline
                      class="text-red-500 text-lg cursor-pointer"
                      :icon="Delete"
                    />
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </el-card>
    <el-card class="mb-4" body-style="padding: 15px 20px 5px;">
      <el-form
        ref="formRef"
        label-position="right"
        label-width="80"
        :model="submitForm"
        class="w-[360px]"
      >
        <el-form-item label="到货仓库" prop="depositoryId" required>
          <el-select
            v-model="submitForm.depositoryId"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.depositoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="name">
          <el-input
            v-model="submitForm.des"
            placeholder="请输入"
            clearable
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card body-style="padding: 12px 20px;">
      <div class="flex items-center justify-between">
        <div class="text-black">
          商品总数量：<span style="color: #f76847">{{
            submitForm.sumAmount
          }}</span>
        </div>
        <div class="flex items-center" style="color: #f76847">
          <div>
            合计：<span class="text-xl">¥{{ submitForm.totalPrice }}</span>
          </div>
          <el-button
            type="danger"
            :disabled="tableSelectList.length == 0"
            class="ml-3"
            @click="submitOrder"
            >提交订单</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.home {
  height: calc(100% - 35px);
  border-radius: 5px;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
}
</style>
